<template>
  <el-form-item style="display: table-cell">
    <el-popover
      placement="top-end"
      width="360"
      :visible-arrow="false"
      trigger="click"
      @show="showColorDialogVar = true"
      @hide="showColorDialogVar = false"
    >
      <div>
        <div id="colorPanel" class="icon-list">
          <div>
            <p>属性色块：</p>
          </div>
          <div class="color-name" v-for="dict in colorNames" :key="dict.dictValue">
            <svg :style="'height: 18px;width: 18px;'">
              <rect width="18px" height="18px" :style="'fill:' + dict.dictLabel" />
            </svg>
            <span>{{ getLabelName(dict.dictValue) }} </span>
          </div>
        </div>
      </div>
      <el-button slot="reference" type="text" :disabled="isFullscreen" class="color-name-btn">
        色块
        <i
          style="transform: rotate(90deg)"
          :class="showColorDialogVar ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
        ></i>
      </el-button>
    </el-popover>
  </el-form-item>
</template>

<script>
export default {
  name: 'ColorListBox',

  props: {
    type: Object,
    default: {},
  },

  methods: {
    getLabelName(dictValue) {
      let ret = dictValue
      try {
        let jsonObject = JSON.parse(this.selectDictLabel(this.attributeNames, 'labelName'))
        ret = jsonObject.values[ret]
      } catch {}
      return ret
    },
  },
}
</script>

<style lang="scss" scoped>
.icon-list {
  height: calc(100vh - 155px);
  overflow-y: auto;
  .color-name {
    height: 30px;
    line-height: 30px;
    // margin-bottom: -5px;
    cursor: pointer;
    width: 50%;
    float: left;
    span {
      vertical-align: 0.3em;
      fill: currentColor;
      margin-left: 5px;
    }
  }
}
</style>
